<template>
  <div class="warning-center">
    <Badge :count="warningTotal" class="warning-component" :overflow-count="99" @click.native="handleShowDetail">
      <div href="#" class="warning-icon"></div>
    </Badge>
    <div class="warning-info" v-show="detailShow">
      <div class="warning-info-icon"></div>
      <div class="warning-info-wrap" id="warning-info-wrap">
        <ul class="warning-info-list">
          <li v-for="(item, index) in leakMsg" :key="index">
            {{ item.msg }}
            <div class="line"></div>
          </li>
        </ul>
      </div>
      <div class="warning-info-close" @click="handleClose"></div>
    </div>
  </div>
</template>

<script>
  // import Stomp from 'stompjs'
  import Reconnectingwebsocket from 'reconnectingwebsocket'
  export default {
    data () {
      return {
        websocket: null,
        detailShow: false,
        timer: null,
        warningTotal: 0,
        leakMsg: []
      }
    },
    methods: {
      handleShowDetail () {
        this.detailShow = true
        let self = this
        setTimeout(() => {
          self.initAnimation()
        }, 100)
      },
      handleClose () {
        this.timer && clearInterval(this.timer)
        this.detailShow = false
      },
      initAnimation () {
        var content = document.getElementById('warning-info-wrap')
        var ul = content.getElementsByTagName('ul')[0]
        var speed = 1
        if (ul.offsetWidth <= 840) {
          return
        }
        ul.innerHTML += ul.innerHTML
        ul.style.left = -ul.offsetWidth / 2
        function run () {
          if (ul.offsetLeft < -ul.offsetWidth / 2) {
            ul.style.left = 0
          } else if (ul.offsetLeft > 0) {
            ul.style.left = -ul.offsetWidth / 2 + 'px'
          }
          ul.style.left = ul.offsetLeft + speed + 'px'
        }
        this.timer = setInterval(run, 30)
        let self = this
        content.onmouseover = function () {
          clearInterval(self.timer)
        }
        content.onmouseout = function () {
          self.timer = setInterval(run, 30)
        }
      },
      onWebsocket () {
        let self = this
        this.websocket = new Reconnectingwebsocket('ws://39.98.124.89:9010/lsms/gasLeak/admin')
        this.websocket.onmessage = function (news) {
          if (news.data !== '欢迎admin加入连接！') {
            const restbody = JSON.parse(news.data)
            self.leakMsg = restbody['leakMsg']
            self.warningTotal = restbody['leakMsg'].length
          }
        }
        // const stompClient = Stomp.over(this.websocket)
        // stompClient.connect({}, () => {
        //   stompClient.subscribe('', res => {
        //     const restbody = JSON.parse(res.leakMsg)
        //     this.leakMsg = restbody
        //     this.warningTotal = restbody.length
        //   })
        // })
      },
      offWebsocket () {
        this.websocket && this.websocket.close()
      }
    },
    mounted () {
      this.onWebsocket()
    },
    beforeDestroy () {
      this.timer && clearInterval(this.timer)
      this.offWebsocket()
    }
  }
</script>

<style lang="less" scoped>
  .warning-center {
    z-index: 4;
    margin-right: 20px;
    .warning-component {
      cursor: pointer;
    }
    .warning-icon {
      width: 57px;
      height: 57px;
      background: url('~@/assets/images/viewIcon/icon_sy_qtxlbj.png');
    }
  }
  /deep/ .ivu-badge-count {
    top: -5px;
    right: 4px;
  }
  .warning-info {
    position: fixed;
    right: 28%;
    top: 126px;
    width: 48%;
    height: 38px;
    background: rgba(18, 58, 155, 0.6);
    border: 1px solid #7fdff7;
    display: flex;
    align-items: center;
    .warning-info-icon {
      width: 46px;
      height: 100%;
      background: url('~@/assets/images/viewIcon/icon_sy_qtxlbj_s.png') no-repeat center;
    }
    .warning-info-close {
      cursor: pointer;
      width: 38px;
      height: 100%;
      background: url('~@/assets/images/viewIcon/icon_sy_gdt_closed.png') no-repeat center;
    }
    .warning-info-wrap {
      position: relative;
      width: calc(100% - 84px);
      height: 100%;
      color: #ff3355;
      overflow: hidden;
    }
    .warning-info-list {
      position: absolute;
      top: 0px;
      left: 0px;
      width: auto;
      height: 100%;
      list-style: none;
      // animation: mymove 5s infinite linear;
      display: flex;
      align-items: center;
      li {
        height: 100%;
        white-space: nowrap;
        display: flex;
        align-items: center;
        .line {
          margin: 0 20px;
          height: 80%;
          width: 1px;
          border-right: 1px dashed #7fdff7;
        }
      }
    }
  }
</style>
